function initChart(data) {
    let myChart1 = echarts.init(document.getElementById('box1'))
    let myChart3 = echarts.init(document.getElementById('box3'))
    let myChart4 = echarts.init(document.getElementById('box4'))
    let myChart5 = echarts.init(document.getElementById('box5'))
    let myChart6 = echarts.init(document.getElementById('box6'))
    let myChart9 = echarts.init(document.getElementById('box9'))

    option1 = {
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 60,
            right: 60,
            top: 50,
            bottom: 40
        },
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            feature: {
                // dataView: {show: true, readOnly: false},
                // magicType: {show: true, type: ['line', 'bar']},
                // restore: {show: true},
                // saveAsImage: {show: true}
            }
        },
        legend: {
            top: 10,
            textStyle: {
                fontSize: 10,
                color: 'rgba(255,255,255,.7)'
            },
            data: ['2017年', '2018年', '同比增速']
        },
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },

                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '',
                min: 0,
                max: 250,
                interval: 50,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },

                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: '',
                max: 25,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name: '2017年',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#b266ff'},
                                {offset: 1, color: '#121b87'}
                            ]
                        )
                    }
                },
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name: '2018年',
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#00f0ff'},
                                {offset: 1, color: '#032a72'}
                            ]
                        )
                    }
                },
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name: '同比增速',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#fffb34'},
                                {offset: 1, color: '#fffb34'}
                            ]
                        )
                    }
                },
                yAxisIndex: 1,
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    }
    option3 = {
        color: ['#d2d17c', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 20,
            right: 30,
            top: 0,
            bottom: 20
        },
        legend: {
            top: 5,

            textStyle: {
                fontSize: 10,
                color: 'rgba(255,255,255,.6)'
            },
            data: ['男', '女', '总数']
        },
        grid: {
            left: 20,
            right: 30,
            top: 40,
            bottom: 10,
            containLabel: true
        },
        toolbox: {
            feature: {
                // saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            data: ['0-6', '6-18', '18-28', '28-55', '55以上']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
        },
        series: [
            {
                name: '男',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: [120, 132, 101, 134, 90]
            },
            {
                name: '女',
                type: 'line',
                stack: '总量',
                data: [220, 182, 191, 234, 290]
            },
            {
                name: '总数',
                type: 'line',
                stack: '总量',
                data: [150, 232, 201, 154, 190]
            }
        ]
    }

    option4 = {
        backgroundColor: 'rgba(1,202,217,.2)',
        color: ['#7ecef4', '#7fd7b1'],
        grid: {
            left: 30,
            right: 20,
            top: 20,
            bottom: 40
        },
        xAxis: {
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.7)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            data: ['工单', '订单', '库存', '物料', '产品', '状态']
        },
        yAxis: {
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            }
        },
        series: [{
            symbolSize: 20,
            data: [
                [0.0, 8.04],
                [2.0, 6.95],
                [3.0, 7.58],
                [5.0, 8.81],
                [0.4, 8.33],
                [4.0, 1.96],
                [0.3, 7.24],
                [4.6, 4.26],
                [2.0, 4.84],
                [2.0, 4.82],
                [5.0, 5.68]
            ],
            type: 'scatter'
        }]
    }
    option5 = {
        color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
        backgroundColor: 'rgba(1,202,217,.2)',
        legend: {
            top: 10,
            textStyle: {
                fontSize: 10,
                color: 'rgba(255,255,255,.7)'
            },
            data: ['订单', '工单', '库存', '物料', '产品', '订制', '其他']
        },
        grid: {
            left: 10,
            right: 10,
            top: 40,
            bottom: 10,
            containLabel: true
        },

        xAxis: [
            {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },
                data: ['康定市', '泸定县', '丹巴县', '九龙县', '新龙县', '巴塘县', '得荣县', '理塘县', '甘孜县', '道孚县', '德格县', '色达县']
            }
        ],
        yAxis: [
            {
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },

                axisLabel: {
                    formatter: '{value} ml'
                },
                type: 'value'
            }

        ],
        series: [

            {
                name: '订单',
                type: 'bar',
                barWidth: 30,
                stack: '搜索引擎',
                data: [620, 732, 701, 734, 1090, 1130, 1120, 620, 732, 701, 734, 1090,]
            },
            {
                name: '工单',
                type: 'bar',
                stack: '搜索引擎',
                data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
            },
            {
                name: '库存',
                type: 'bar',
                stack: '搜索引擎',
                data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
            },
            {
                name: '物料',
                type: 'bar',
                stack: '搜索引擎',
                data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
            },
            {
                name: '产品',
                type: 'bar',
                stack: '搜索引擎',
                data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
            },
            {
                name: '订制',
                type: 'bar',
                stack: '搜索引擎',
                data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
            },
            {
                name: '其他',
                type: 'bar',
                stack: '搜索引擎',
                data: [62, 82, 91, 84, 109, 110, 120, 91, 84, 109, 110, 120]
            }
        ]
    }
    option6 = {
        color: ['#7ecef4'],
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 40,
            right: 20,
            top: 30,
            bottom: 0,
            containLabel: true
        },

        xAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,0)"
            },
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.5)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.1)'
                }
            },
            axisLabel: {
                color: "rgba(255,255,255,.5)"
            },
            data: ['务农', '建筑工', '技工', '销售', '职工']
        },
        series: [
            {
                name: '2011年',
                type: 'bar',
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            1, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(230,253,139,.7)'},
                                {offset: 1, color: 'rgba(41,220,205,.7)'}
                            ]
                        )
                    }
                },
                data: [18203, 23489, 29034, 104970, 131744]
            }
        ]
    }
    option9 = {
        backgroundColor: 'rgba(1,202,217,.2)',
        grid: {
            left: 60,
            right: 20,
            top: 45,
            bottom: 40
        },

        toolbox: {
            feature: {
                // dataView: {show: true, readOnly: false},
            }
        },
        legend: {
            top: 10,
            textStyle: {
                fontSize: 10,
                color: 'rgba(255,255,255,.7)'
            },
            data: [data.chart.type]
        },
        dataZoom: [
            {
                show: false,
                startValue: 0,
                endValue: 6
            }
        ],
        xAxis: [
            {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                data: data.chart.xData,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '',
                min: 0,
                max: 250,
                interval: 50,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.01)'
                    }
                },

                axisLabel: {
                    formatter: '{value}' + data.chart.unit
                }
            },
            {
                type: 'value',
                name: '',
                max: 25,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0)'
                    }
                },
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name: data.chart.type,
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#00f0ff'},
                                {offset: 1, color: '#032a72'}
                            ]
                        )
                    }
                },
                data: data.chart.yData
            },
            // {
            //     name: '实有房屋',
            //     type: 'bar',
            //
            //     itemStyle: {
            //         normal: {
            //             color: new echarts.graphic.LinearGradient(
            //                 0, 0, 0, 1,
            //                 [
            //                     {offset: 0, color: '#00f0ff'},
            //                     {offset: 1, color: '#032a72'}
            //                 ]
            //             )
            //         }
            //     },
            //     data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            // },
            // {
            //     name: '实有单位',
            //     type: 'bar',
            //     itemStyle: {
            //         normal: {
            //             color: new echarts.graphic.LinearGradient(
            //                 0, 0, 0, 1,
            //                 [
            //                     {offset: 0, color: '#fffb34'},
            //                     {offset: 1, color: '#032a72'}
            //                 ]
            //             )
            //         }
            //     },
            //     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            // }
        ]
    }

    myChart1.setOption(option1)
    myChart3.setOption(option3)
    myChart4.setOption(option4)
    myChart5.setOption(option5)
    myChart6.setOption(option6)
    myChart9.setOption(option9)
    setInterval(function () {
        console.log(333)
        // 每次向后滚动一个，最后一个从头开始。
        if (option9.dataZoom[0].endValue == 16) {
            option9.dataZoom[0].endValue = 6;
            option9.dataZoom[0].startValue = 0;
        } else {
            option9.dataZoom[0].endValue = option9.dataZoom[0].endValue + 1;
            option9.dataZoom[0].startValue = option9.dataZoom[0].startValue + 1;
        }
        myChart9.setOption(option9)
    }, 2000);

    window.addEventListener('resize', () => {
        myChart1.resize()
        myChart3.resize()
        myChart4.resize()
        myChart5.resize()
        myChart6.resize()
        myChart9.resize()
    });
    const boxOne = document.querySelectorAll('.box-one')[0]
    const boxTwo = document.querySelectorAll('.box-two')[0]
    const boxThree = document.querySelectorAll('.box-three')[0]
    const boxFour = document.querySelectorAll('.box-four')[0]
    const boxFive = document.querySelectorAll('.box-five')[0]
    const boxSix = document.querySelectorAll('.box-six')[0]
    const boxSeven = document.querySelectorAll('.box-seven')[0]
    const boxNine = document.querySelectorAll('.box-nine')[0]
    const boxArr = [boxOne, boxTwo, boxThree, boxFour, boxFive, boxSix, boxSeven, boxNine]
    const resizeObserver = new ResizeObserver(() => {
        myChart1.resize()
        myChart3.resize()
        myChart4.resize()
        myChart5.resize()
        myChart6.resize()
        myChart9.resize()
    })
    boxArr.forEach(item => {
        resizeObserver.observe(item)
    })
}

function initTable() {
    const myTable = document.querySelector('tbody')
    let arr = [
        {
            workNum: 202310082299,
            status: '下工单',
            name: '大螺丝惆怅串串香反反复色长岑长',
            num: 202310082299,
            num2: 1,
            num3: 9,
            Progress: [0, 0, 0, 0]
        }, {
            workNum: 202310082299,
            status: '物料筹备',
            name: '无纸',
            num: 202310082299,
            num2: 1,
            num3: 9,
            Progress: [100, 0, 0, 0]
        },
        {
            workNum: 202310082299,
            status: '生产中',
            name: '玻璃',
            num: 202310082299,
            num2: 145,
            num3: 999,
            Progress: [100, 100, 100, 0]
        },
        {
            workNum: 202310082299,
            status: '物料筹备',
            name: '荧光粉',
            num: 202310082299,
            num2: 1,
            num3: 9,
            Progress: [100, 100, 0, 0]
        },
        {
            workNum: 202310082299,
            status: '已完成',
            name: '新产品',
            num: 202310082299,
            num2: 1,
            num3: 9,
            Progress: [100, 100, 100, 100]
        }
    ]
    for (let i = 0; i < 2; i++) {
        arr = [...arr, ...arr]
    }
    let str = ''
    arr.forEach(item => {
        let strItem = `<tr>
                            <td>${item.workNum}</td>
                            <td>${item.status}</td>
                            <td>${item.name}</td>
                            <td>${item.num}</td>\
                            <td>${item.num2}/${item.num3}</td>
                            <td>
                                <div class="progress-box">
                                    <div class="progress-item">
                                        <div class="progress-item-top ${item.Progress[0] === 100 ? 'green' : null}">${item.Progress[0]}%</div>
                                        <div class="progress-item-bottom ${item.Progress[0] === 100 ? 'green' : null}">下工单</div>
                                    </div>
                                   <div class="line">——</div>
                                    <div class="progress-item">
                                        <div class="progress-item-top ${item.Progress[1] === 100 ? 'green' : null}">${item.Progress[1]}%</div>
                                        <div class="progress-item-bottom ${item.Progress[1] === 100 ? 'green' : null}">物料筹备</div>
                                    </div>
                                    <div class="line">——</div>
                                    <div class="progress-item">
                                        <div class="progress-item-top ${item.Progress[2] === 100 ? 'green' : null}">${item.Progress[2]}%</div>
                                        <div class="progress-item-bottom ${item.Progress[2] === 100 ? 'green' : null}">开始生产</div>
                                    </div>
                                   <div class="line">——</div>
                                    <div class="progress-item">
                                        <div class="progress-item-top ${item.Progress[3] === 100 ? 'green' : null}">${item.Progress[3]}%</div>
                                        <div class="progress-item-bottom ${item.Progress[3] === 100 ? 'green' : null}">已完成</div>
                                    </div>
                                </div>
                            </td>
                        </tr>`
        str += strItem
    })
    myTable.innerHTML = str

    let d = arr.length * 51
    scrollup(myTable, d, 0)
}

function scrollup(o, d, c) {
    if (d === c) {
        let t = getFirstChild(o.firstChild).cloneNode(true)
        o.removeChild(getFirstChild(o.firstChild))
        o.appendChild(t)
        t.style.marginTop = "0px"
        o.onmousewheel = () => true
        window.setTimeout(() => {
            scrollup(o, d, 0)
        }, 5000)
    } else {
        o.onmousewheel = () => false
        c += 1
        getFirstChild(o.firstChild).style.marginTop = -c + "px"
        if (c % 51 === 0) {
            window.setTimeout(() => {
                scrollup(o, d, c)
            }, 2000)
        } else
            window.setTimeout(() => {
                scrollup(o, d, c)
            }, 20)
    }
}

//解决firefox下会将空格回车作为节点的问题
function getFirstChild(node) {
    while (node.nodeType != 1) {
        node = node.nextSibling;
    }
    return node
}

async function postData(url, formData) {
    try {
        const response = await fetch(url, {
            method: 'POST',
            body: formData
        })
        if (!response.ok) {
            throw new Error('Network response was not ok')
        }
        const data = await response.json()
        return data
    } catch (error) {
        console.error('Error:', error)
        throw error
    }
}

async function sendData() {
    const url = 'https://api.leanplants.com/v1/workordeGetEstablishData'
    // 创建一个新的FormData对象并添加需要发送的数据
    const formData = new FormData()
    // formData.append('id', '34')
    // formData.append('token', '74ecf7b4db96fb028b750aae0722e62df7ab1c71');
    try {
        const res = await postData(url, formData);
        // if (res.status == '800023') return alert('登录失效，请重新登录')
        // if (res.status != '800000') return alert('请求数据失败')
        let data = {
            chart: {
                type: '类型',
                unit: '个',
                xData: ['A', 'B', 'C', 'D', 'A', 'B', 'C', 'D', 'A', 'B', 'C', 'D', 'A', 'B', 'C', 'D',],
                yData: [10, 20, 30, 40, 10, 20, 30, 40, 10, 20, 30, 40, 10, 20, 30, 40,]
            }
        }
        initChart(data)
        initTable()
        console.log(res) // 处理请求返回的数据
    } catch (error) {
        console.error('Error:', error)
    }
}


sendData()
